<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 设置文档的字符编码为UTF-8 -->
  <meta charset="UTF-8" />
  <!-- 设置浏览器兼容模式为IE=edge -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- 设置视口的宽度为设备宽度，初始缩放比例为1.0 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- 引入外部样式表文件index.css -->
  <link rel="stylesheet" href="./css/index.css" />
  <!-- 设置页面标题为“记事本” -->
  <title>记事本</title>
</head>

<body>

  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <header class="header">
      <!-- 页面标题 -->
      <h1>小黑记事本</h1>
      <!-- 输入框，用于输入任务，使用v-model双向绑定数据 -->

<!--1. ================================================================================= -->
      <!-- 1. @keyup.enter="submit" 键盘回车监听 -->
      <input @keyup.enter="submit"   v-model="todoName" placeholder="请输入任务" class="new-todo" />
     <!-- ============================================================================================== -->
      <!-- 按钮，点击时调用add方法添加任务 -->
      <button @click="add" class="add">添加任务</button>
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <!-- 无序列表，用于显示任务列表 -->
      <ul class="todo-list">
        <!-- 使用v-for循环渲染列表项，每个列表项对应一个任务 -->
        <li class="todo" v-for="(item, index) in list" :key="item.id">
          <!-- 列表项内容容器 -->
          <div class="view">
            <!-- 显示任务序号 -->
            <span class="index">{{ index + 1 }}.</span>
            <!-- 显示任务名称 -->
            <label>{{ item.name }}</label>
            <!-- 按钮，点击时调用del方法删除任务 -->
            <button @click="del(item.id)" class="destroy"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-show="list.length >0">
      <!-- 统计任务数量 -->
      <span class="todo-count">合 计:<strong> {{list.length}} </strong></span>
      <!-- 按钮，点击时清空任务列表 -->
      <button @click="list=[]" class="clear-completed">
        清空任务
      </button>
    </footer>
  </section>

  <!-- 底部 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 创建Vue实例
    const app = new Vue({
      // 挂载点
      el: '#app',
      // 数据对象
      data: {
        // 任务列表数组
        list: [
          { id: 1, name: '跑步一公里' },
          { id: 3, name: '游泳100米' },
        ]
      },
      // 方法对象
      methods: {
        // 删除任务的方法
        del(id) {
          // 使用filter方法过滤掉id匹配的任务
          this.list = this.list.filter(item => item.id !== id)
        },
        // 添加任务的方法
        add() {
          // 判断输入框是否为空
          if (this.todoName.trim() === '') {
            // 如果为空，弹出提示框
            return alert('请输入任务')
          }
          // 在列表头部添加新任务
          this.list.unshift({
            // 使用当前时间戳作为任务的id
            id: Date.now(),
            // 任务名称为输入框中的内容
            name: this.todoName
          });
          // 清空输入框
          this.todoName = ''
        },

        // 1.<!-- @keyup.enter="submit" 键盘回车监听 -->
        submit(e) {
          this.add()
        }
      }
    })


    // 1.按键修饰符  键盘回车监听： @keyup.enter="submit"
  </script>
</body>

</html>